<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>砂石管理系统</title>
    <link th:href="@{/css/index.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/plugins/font-awesome-4.7.0/css/font-awesome.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/plugins/jquery-easyui-1.5.5.5/themes/metro/easyui.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/plugins/jquery-easyui-1.5.5.5/themes/mobile.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/plugins/jquery-easyui-1.5.5.5/themes/icon.css}" rel="stylesheet" type="text/css">
    <script type="text/javascript" th:src="@{/plugins/jquery-easyui-1.5.5.5/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <script type="text/javascript" th:src="@{/plugins/jquery-easyui-1.5.5.5/jquery.easyui.min.js}"></script>
    <script type="text/javascript" th:src="@{/plugins/jquery-easyui-1.5.5.5/jquery.easyui.mobile.js}"></script>
    <script type="text/javascript" th:src="@{/plugins/jquery-easyui-1.5.5.5/locale/easyui-lang-zh_CN.js}"></script>

</head>
<body class="index-body">
      <div class="main-box">
          <div class="top-head">
              <!--<input type="button" id="hideMenus" value="点击我">-->
              <span id="hideMenus" style="" class="fa fa-bars"></span>
          </div>
          <div class="content">
              <div class="content-menus">
                  <div class="toolbar-menus">
                      <span style="float:left;line-height: 40px;color:#fff;padding-left: 10px;font-size:18px;" class="fa fa-cog"></span>
                      <span style="float:left;line-height: 40px;color:#fff;padding-left: 10px;font-size:16px;">系统菜单</span>
                  </div>
                  <div class="menus">
                      <!--<ul id="tt"></ul>-->
                      <ul class="menus-list">
                          <!--<li  class="menus-item">-->
                              <!--<h4  class="menus-title active">-->
                                  <!--<span class="fa fa-laptop menus-title-left"></span>-->
                                  <!--<span class="menus-title-center">菜单1</span>-->
                                  <!--<span class="fa fa-angle-right menus-title-right"></span>-->
                                  <!--&lt;!&ndash;<span class="fa fa-angle-down"></span>&ndash;&gt;-->
                              <!--</h4>-->
                              <!--<ul class="menus-child-list">-->
                                  <!--<li  class="menus-child-item"><i class="fa fa-circle-o"></i>菜单1-1</li>-->
                                  <!--<li  class="menus-child-item"><i class="fa fa-circle-o"></i>菜单1-1</li>-->
                                  <!--<li  class="menus-child-item"><i class="fa fa-circle-o"></i>菜单1-1</li>-->
                                  <!--<li  class="menus-child-item"><i class="fa fa-circle-o"></i>菜单1-1</li>-->
                              <!--</ul>-->
                          <!--</li>-->
                      </ul>
                  </div>
              </div>
              <div class="content-page">
                  <div class="content-page-title">用户管理/用户添加</div>
                  <div class="content-page-frame">
                      <div id="new-frame">
                          <div class="indexPage" style="height:100%;width:100%;background-color: #efefef;text-align: center;line-height: 1.5;font-size: 50px;overflow-y: hidden;">
                              <img th:src="@{/images/indexbg.jpg}" style="padding: 0;margin: 0;width: 100%;">
                          </div>
                      </div>
                  </div>

              </div>
          </div>
      </div>


<script type="text/javascript">


    var framePage={
        loginFlag:"LoginPageHtml",
        init:function () {
            this.initEvents();
            this.initPageMenu();

        },
        initPageMenu:function () {


            $.post("/menus/getMenus",function (data) {
                if(data){
//                        <!--<span class="fa fa-angle-down"></span>-->
                    var html = '';
                    for(var i=0;i<data.length;i++){
                        var chilData = data[i].children;
                        html +='<li  class="menus-item">';
                        html +='<h4  class="menus-title active">';
                        html +='<span class="fa fa-laptop menus-title-left"></span>';
                        html +='<span class="menus-title-center">'+data[i].text+'</span>';
                        html +='<span class="fa fa-angle-right menus-title-right"></span>';
                        html +='</h4>';
                        html +='<ul class="menus-child-list">';
                        for(var j=0;j<chilData.length;j++){
                            html +='<li  class="menus-child-item" data-url="'+chilData[j].menuUrl+'"><i class="fa fa-circle-o"></i>'+chilData[j].text+'</li>';
                        }
                        html +='</ul>';
                        html +='</li>';
                    }
                    $(".menus-list").html(html);
                }
            })

//            $('#tt').tree({
//                url:"/menus/getMenus",
//                onClick:function (node) {
//                    var url = node.menuUrl;
//                    if(url){
//                        $("#new-frame").load(url,{"q":""},function () {
//
//                        });
//                    }else{
//                        $(node.target).children(".tree-hit").click();
//                   }
//                },
//                animate:true
//            });
        },
        initEvents:function () {

            var that= this;

            $(".menus").on("click",".menus-title",function () {
               // $(this).siblings().removeClass("active").children(".menus-child-list").slideUp().end().end().addClass("active").children(".menus-child-list").slideDown();
                $(this).addClass("active").siblings(".menus-child-list").slideDown().end().parent().siblings().children(".menus-title").removeClass("active").end().children(".menus-child-list").slideUp();
            }).on("click",".menus-child-item",function () {
                var url = $(this).attr("data-url");
                    if(url){
                        $("#new-frame").load(url,{"q":""},function (resHtml,e) {
                            if(resHtml){
                                var strIndex = resHtml.indexOf(that.loginFlag);//获得字符串的开始位置
                                if(strIndex>0){
                                    window.location.href='/login';
                                }
                            }
                        });
                    }
            })


            $(document).on("click","#hideMenus",function () {

                $(window).resize();

                if($(".content-menus").css("display")=="none"){
                    $(".content-menus").fadeIn(200,function () {
                        $(".content-page").css("marginLeft","230px");
                    });
                }else{
                    $(".content-page").css("marginLeft","0");
                    $(".content-menus").fadeOut(200,function () {

                    });
                }

            })

//            $(".menus").on("click",".menu-item",function () {
//                $(this).addClass("active").siblings().removeClass("active");
//                var url = "${pageContext.request.contextPath}"+$(this).attr("data-url");
//                $("#new-frame").load(url,{"q":""},function () {
//                    framePage.initCssFile();
//                });
//            })
        },
        initCssFile:function () {
            $("head").children("link").each(function (i, n) {
                if($(this).attr("dom-flag")=="css"){
                    $("head")[0].removeChild(n)
                }
            })
            $(".cssfile").each(function () {
                framePage.include_css($(this).attr("href"));
            })
        },
        include_css:function (css_file) {
            var linkStr = '<link href="'+css_file+'" rel="stylesheet" type="text/css" dom-flag="css"/>';
            $("head").append(linkStr);
            return true;
        }
    }

    $(function () {

//        $(document).on("click",".tree-hit",function () {
//            alert("ss");
//            $(".tree-hit").click();
//            $(this).children("ul").hide();
//        })


        framePage.init();





    })
</script>

</body>
</html>